<template>
    <div class="list-page">
        <div class="list-page-header list-page-header-flex">
            <div class="flex-left">
                <el-button type="primary" @click="add">新增</el-button>
            </div>
            <div class="flex-right">
                <el-input v-model="query.name" class="search-input-class" placeholder="耗材名称" />
                <el-select v-model="query.type" class="search-input-class" placeholder="耗材类型">
                    <el-option
                        v-for="item in types"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
                <el-button type="primary" @click="loadData">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="list-content">
            <el-table
                ref="datagrid"
                :data="table.data"
                border
                @row-click="handleClickTableRow"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="code" label="耗材编码" width="100" />
                <el-table-column prop="name" label="耗材名称" width="200" show-overflow-tooltip />
                <el-table-column prop="type" label="类型" width="120" :formatter="typeFormatter" />
                <el-table-column prop="sourceType" label="来源类型" width="120" :formatter="sourceTypeFmt" />
                <el-table-column prop="specs" label="规格" width="200" show-overflow-tooltip />
                <el-table-column prop="model" label="型号" width="200" show-overflow-tooltip />
                <el-table-column prop="unit" label="单位" width="100" show-overflow-tooltip />
                <el-table-column prop="price" label="单价（元）" width="100" :formatter="priceFormatter" />
                <el-table-column fixed="right" label="操作" width="140">
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="edit(scope.row)">编辑</el-button>
                        <el-popconfirm
                            title="正在进行敏感操作，是否继续？"
                            confirmButtonText="继续"
                            cancelButtonText="取消"
                            @confirm="del(scope.row)"
                        >
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="list-footer">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="table.pagination.currentPage"
                :page-sizes="table.pagination.pageSizes"
                :page-size="table.pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="table.pagination.total"
            ></el-pagination>
        </div>
        <el-dialog
            title="耗材信息"
            v-model="showMaterialDialog"
            top="5vh"
            width="500px"
            :lock-scroll="true"
            :close-on-click-modal="false"
            destroy-on-close
        >
            <div class="dialog-content">
                <div class="menu-form">
                    <div class="form-item">
                        <div class="label-class">耗材编码</div>
                        <div class="content-class">
                            <el-input v-model="form.code" class="form-input-class" placeholder="耗材编码"></el-input>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label-class">耗材名称</div>
                        <div class="content-class">
                            <el-input v-model="form.name" class="form-input-class" placeholder="耗材名称"></el-input>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label-class">类型</div>
                        <div class="content-class">
                            <el-radio-group v-model="form.type">
                                <el-radio :label="0">生产耗材</el-radio>
                                <el-radio :label="1">办公耗材</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label-class">来源类型</div>
                        <div class="content-class">
                            <el-radio-group v-model="form.sourceType">
                                <el-radio :label="0">常用耗材</el-radio>
                                <el-radio :label="1">自购耗材</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label-class">规格</div>
                        <div class="content-class">
                            <el-input v-model="form.specs" class="form-input-class" placeholder="规格"></el-input>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label-class">型号</div>
                        <div class="content-class">
                            <el-input v-model="form.model" class="form-input-class" placeholder="型号"></el-input>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label-class">单位</div>
                        <div class="content-class">
                            <el-input v-model="form.unit" class="form-input-class" placeholder="单位"></el-input>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="label-class">单价（元）</div>
                        <div class="content-class">
                            <el-input v-model="form.price" class="form-input-class" placeholder="单位"></el-input>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showMaterialDialog = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'

onMounted(() => {
    loadData()
})

const datagrid = ref(null)

const query = reactive({
    name: '',
    type: ''
})

const table = reactive({
    data: [],
    selected: [],
    pagination: {
        currentPage: 1,
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        total: 0
    }
})

const types = ref([
    {
        label: '全部耗材',
        value: null
    },
    {
        label: '办公耗材',
        value: 1
    },
    {
        label: '生产耗材',
        value: 0
    }
])

const showMaterialDialog = ref(false)

const form = ref({})

const handleSelectionChange = (val) => {
    table.selected = val
}

const handleSizeChange = (val) => {
    table.pagination.pageSize = val
    loadData()
}

const handleCurrentChange = (val) => {
    table.pagination.currentPage = val
    loadData()
}

const handleClickTableRow = (row) => {
    datagrid.value.clearSelection()
    datagrid.value.toggleRowSelection(row)
}

const loadData = () => {
    let params = {
        name: query.name,
        type: query.type,
        page: table.pagination.currentPage,
        pageSize: table.pagination.pageSize
    }
    http.fetchForm({
        url: '/pub/material/queryGrid',
        data: params
    }).then((res) => {
        table.data = res.data.grid
        table.pagination.total = res.data.total
    })
}

const typeFormatter = (row, column) => {
    let data = row[column.property]
    if (data == 0) {
        return '生产耗材'
    } else {
        return '办公耗材'
    }
}

const sourceTypeFmt = (row, column) => {
    let data = row[column.property]
    if (data == 0) {
        return '常用耗材'
    } else {
        return '自购耗材'
    }
}

const reset = () => {
    query.name = ''
    query.type = ''
    loadData()
}

// 新增项目
const add = () => {
    showMaterialDialog.value = true
    form.value = {}
}

// 编辑项目
const edit = (row) => {
    form.value = row
    form.value.price = row.price / 100
    showMaterialDialog.value = true
}

const onSubmit = () => {
    let params = JSON.parse(JSON.stringify(form.value))
    params['price'] = params.price * 100
    http.fetchJson({
        url: '/pub/material/save',
        data: params
    }).then((res) => {
        if (res.code == 0) {
            showMaterialDialog.value = false
            ElNotification({
                title: '提示',
                message: '操作成功',
                type: 'success'
            })
            loadData()
        } else {
            ElNotification({
                title: '提示',
                message: res.message,
                type: 'error'
            })
        }
    })
}

const del = (row) => {
    http.fetchForm({
        url: '/pub/material/deleteById',
        method: 'post',
        data: {
            id: row.id
        }
    }).then((res) => {
        ElNotification({
            title: '提示',
            message: '删除成功',
            type: 'success'
        })
        loadData()
    })
}

const priceFormatter = (row, column) => {
    let data = row[column.property]
    return data / 100
}
</script>
<style scoped>
@import '@/assets/css/list-page.css';

.dialog-content {
    padding: 10px 20px;
}

.label-class {
    width: 100%;
    padding: 10px 0;
    font-size: 12px;
    color: #657180;
    font-weight: bold;
}

.content-class {
    width: 100%;
    padding: 0 0 10px 0;
}

.form-input-class {
    width: 100%;
}
</style>
